﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登陆日志</title>
    <script src="/Apm/js/CMSList.js"></script>
    <style>
        .page{
            height:100%;
            display:flex;
        }
        .page-left {
            width: 18rem;
            background-color: #d2d2d2;
            overflow-y: auto;
        }
        .page-userlist {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0.5rem 2rem;
        }
        .page-userlist img{
            width:4rem;
            height:4rem;
            border-radius:2rem;
            
        }
        .page-userlist span{
            
            font-family:'楷体';
            font-size:1.4rem;
            font-weight:bold;
            padding-left:4rem;
            
        }

        .page-li {
            background-color: #f2f2f2;
            border-bottom: solid #fff 2px;
        }
        .page-this {
            background-color: #5FB878;
        }
        .page-right {
            padding: 1rem 2rem;
            overflow-y: auto;
            width:calc(100% - 20rem);
        }
        .log-timeline-item{
            padding-bottom:0px;
        }
    </style>
</head>
<body>
    <div class="page">
        <!--begin 人员列表-->
        <div class="page-left">
            <ul id="UserList">
                <!--<li id="00001" class="page-li page-this">
                    <div class="page-userlist">
                        <img lay-src="/image/login.jpg" />
                        <span>张三</span>
                    </div>
                </li>
                <li class="page-li">
                    <div class="page-userlist">
                        <img src="/image/boy.png" />
                        <span>张三风</span>
                    </div>
                </li>-->
                
                
            </ul>
        </div>
        <!--end-->

        <!--begin 对应人员操作日志-->
        <div class="page-right">
            <ul id="UserLog" class="layui-timeline">
                <!--<li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">8月18日</h3>
                        <p>
                            layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                            <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                            <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">8月16日</h3>
                        <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                        <ul>
                            <li>《登高》</li>
                            <li>《茅屋为秋风所破歌》</li>
                        </ul>
                    </div>
                </li>
                
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">过去</div>
                    </div>
                </li>-->
            </ul>
        </div>
        <!--end-->
    </div>
</body>
</html>
<script>
    layui.use('layer', function () {
        var layer = layui.layer;

        BindData();
    })

    function Clickli(id) {
        $("#UserList li").removeClass("page-this");
        $("#" + id + "").addClass("page-this");
        GetUserLog(id);
    }
    /**
     * 根据人员id获取登陆日志
     * @param id
     */
    function GetUserLog(id) {
        $("#UserLog").empty();
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/Method/LogLoginGet?Token=' + MyPublic.getToken() +'&UserCode='+id,
                success: function (data) {

                    if (data == null) {
                        return;
                    }

                    var pagetotal = Math.ceil(data.length / pageSize);//总页数
                    
                    
                    flow.load({
                        elem: '#UserLog',
                        isLazyimg: false,//关闭图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
                                
                                //组合html
                                lis.push('<li class="layui-timeline-item">');
                                lis.push('<i class="layui-icon layui-timeline-axis">&#xe63f;</i>');
                                lis.push('<div class="layui-timeline-content layui-text">');

                                lis.push('<h3 class="layui-timeline-title">' + MyPublic.getFnTime(data[index].LoginTime) + '</h3>');
                                lis.push('<p>');
                                if (data[index].State == 0) {
                                    lis.push('<span style="color:#5FB878">' + data[index].Remark + '</span></br>');
                                }
                                else {
                                    lis.push('<span style="color:#FF5722">' + data[index].Remark + '</span></br>');
                                }
                                var device = JSON.parse(data[index].Device);
                                lis.push('使用系统：' + device.os + '</br>');
                                lis.push('登陆IP：' + data[index].IP + '</br>');
                                lis.push('</p>');
                                lis.push('</div>');
                                lis.push(' </li>');

                            }

                            if (page+1 > pagetotal) {
                                lis.push('<li class="layui-timeline-item log-timeline-item">');
                                lis.push('<i class="layui-icon layui-timeline-axis">&#xe63f;</i>');
                                lis.push('<div class="layui-timeline-content layui-text">');
                                lis.push('<div class="layui-timeline-title">过去</div>');
                                lis.push('</div>');
                                lis.push('</li>');
                            }

                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    
                }
            })
        });
    }
    /**
     * 人员列表
     */
    function GetUserList() {
        layui.use('flow', function () {
            var flow = layui.flow;

            //流加载
            var pageSize = 15;//初始化默认显示15条
            ajaxget({
                url: 'api/Method/UserInfoGet?Token=' + MyPublic.getToken(),
                success: function (data) {

                    if (data == null) {
                        return;
                    }
                    var pagetotal = Math.ceil(data.length / pageSize);//总页数
                    
                    flow.load({
                        elem: '#UserList',
                        isLazyimg: true,//开启图片懒加载
                        done: function (page, next) {
                            var lis = [];
                            for (var index = (page - 1) * pageSize, len = data.length > page * pageSize ? page * pageSize : data.length; index < len; index++) {
                                //组合html
                                if (index === 0) {
                                    lis.push('<li id="' + data[index].UserCode + '" class="page-li page-this" onclick="Clickli(this.id)">');
                                }
                                else {
                                    lis.push('<li id="' + data[index].UserCode + '" class="page-li" onclick="Clickli(this.id)">');
                                }
                                lis.push('<div class="page-userlist">');
                                if (data[index].PictureUrl === "") {
                                    if (data[index].Sex === 1) {
                                        lis.push('<img lay-src="/image/boy.png" />');
                                    }
                                    else {
                                        lis.push('<img lay-src="/image/girl.png" />');
                                    }
                                }
                                else {
                                    lis.push('<img lay-src="' + ApiURL + data[index].PictureUrl + '" />');
                                }

                                lis.push('<span>' + data[index].Name + '</span>');
                                lis.push('</div>');
                                lis.push('</li>');
                            }
                            
                            next(lis.join(''), page < pagetotal);
                        }
                    });

                    //初始化加载日志数据
                    var id = data[0].UserCode;
                    GetUserLog(id)
                }
            })
        });
    }

    /**
     * 初始化数据
     */
    function BindData() {
        GetUserList();
    }
</script>